<!-- 
    找回密码页面
-->
<template>
    <div class="retrieve-container">
        <div class="retrieve-box">
            <div class="retrieve-header">
                <h1 class="retrieve-title">找回密码</h1>
                <p class="retrieve-subtitle">请选择找回方式</p>
            </div>

            <div class="retrieve-form">
                <!-- 步骤指示器 -->
                <div class="step-indicator">
                    <div class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
                        <span class="step-number">1</span>
                        <span class="step-text">验证身份</span>
                    </div>
                    <div class="step-line" :class="{ active: currentStep > 1 }"></div>
                    <div class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
                        <span class="step-number">2</span>
                        <span class="step-text">重置密码</span>
                    </div>
                    <div class="step-line" :class="{ active: currentStep > 2 }"></div>
                    <div class="step" :class="{ active: currentStep >= 3 }">
                        <span class="step-number">3</span>
                        <span class="step-text">完成</span>
                    </div>
                </div>

                <!-- 步骤1：选择验证方式 -->
                <div v-if="currentStep === 1" class="step-content">
                    <div class="form-group">
                        <label class="form-label">验证方式</label>
                        <div class="verify-options">
                            <label class="verify-option" :class="{ active: verifyMethod === 'email' }">
                                <input type="radio" v-model="verifyMethod" value="email" />
                                <span class="option-icon">📧</span>
                                <span class="option-text">邮箱验证</span>
                            </label>
                            <label class="verify-option" :class="{ active: verifyMethod === 'phone' }">
                                <input type="radio" v-model="verifyMethod" value="phone" />
                                <span class="option-icon">📱</span>
                                <span class="option-text">手机验证</span>
                            </label>
                        </div>
                    </div>
                    <div style="display: flex;flex-direction: column;gap: 10px;">

                    
                    <div class="form-group" v-if="verifyMethod === 'email'">
                        <label class="form-label">邮箱地址</label>
                        <div class="input-wrapper">
                            <i class="input-icon">📧</i>
                            <input type="email" class="form-input" placeholder="请输入注册时的邮箱地址" v-model="formData.email"
                                @blur="validateEmail" />
                        </div>
                        <span v-if="errors.email" class="error-message">{{ errors.email }}</span>
                    </div>

                    <div class="form-group" v-if="verifyMethod === 'phone'">
                        <label class="form-label">手机号码</label>
                        <div class="input-wrapper">
                            <i class="input-icon">📱</i>
                            <input type="tel" class="form-input" placeholder="请输入注册时的手机号码" v-model="formData.phone"
                                @blur="validatePhone" />
                        </div>
                        <span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
                    </div>

                    <button class="next-btn" @click="sendVerifyCode" :disabled="!canSendCode || isLoading">
                        {{ isLoading ? '发送中...' : '发送验证码' }}
                    </button>
                </div>
                </div>
                <!-- 步骤2：输入验证码 -->
                <div v-if="currentStep === 2" class="step-content">
                    <div class="form-group">
                        <label class="form-label">验证码</label>
                        <div class="verify-code-container">
                            <div class="input-wrapper">
                                <i class="input-icon">🔢</i>
                                <input type="text" class="form-input" placeholder="请输入验证码" v-model="formData.verifyCode"
                                    maxlength="6" />
                            </div>
                            <button class="resend-btn" @click="resendCode" :disabled="countdown > 0">
                                {{ countdown > 0 ? `${countdown}s后重发` : '重新发送' }}
                            </button>
                        </div>
                        <span v-if="errors.verifyCode" class="error-message">{{ errors.verifyCode }}</span>
                    </div>
                    <div class="form-group">
                        <label class="form-label">新密码</label>
                        <div class="input-wrapper">
                         <i class="input-icon">🔒</i>
                            <input :type="showPassword ? 'text' : 'password'" class="form-input" placeholder="请输入新密码"
                                v-model="formData.newPassword" @blur="validatePassword" />
                            <button type="button" class="password-toggle" @click="togglePassword">
                                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                            </button>
                        </div>
                        <span v-if="errors.newPassword" class="error-message">{{ errors.newPassword }}</span>
                    </div>

                    <div class="form-group">
                        <label class="form-label">确认新密码</label>
                        <div class="input-wrapper">
                            <i class="input-icon">🔐</i>
                            <input :type="showConfirmPassword ? 'text' : 'password'" class="form-input"
                                placeholder="请再次输入新密码" v-model="formData.confirmPassword"
                                @blur="validateConfirmPassword" />
                            <button type="button" class="password-toggle" @click="toggleConfirmPassword">
                                {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
                            </button>
                        </div>
                        <span v-if="errors.confirmPassword" class="error-message">{{ errors.confirmPassword }}</span>
                    </div>

                    <div class="btn-group">
                        <button class="back-btn" @click="prevStep">上一步</button>
                        <button class="next-btn" @click="resetPassword" :disabled="!canResetPassword || isLoading">
                            {{ isLoading ? '重置中...' : '重置密码' }}
                        </button>
                    </div>
                </div>

                <!-- 步骤3：完成 -->
                <div v-if="currentStep === 3" class="step-content">
                    <div class="success-content">
                        <div class="success-icon">✅</div>
                        <h3 class="success-title">密码重置成功！</h3>
                        <p class="success-message">您的密码已经成功重置，请使用新密码登录。</p>
                        <button class="login-btn" @click="goToLogin">立即登录</button>
                    </div>
                </div>
            </div>

            <div class="retrieve-footer">
                <p>想起密码了？<span @click="goToLogin" class="login-link">立即登录</span></p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
    
// 响应式数据
const currentStep = ref(1)
const verifyMethod = ref('email')
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const isLoading = ref(false)
const countdown = ref(0)
let countdownTimer = null

const formData = reactive({
    email: '',
    phone: '',
    verifyCode: '',
    newPassword: '',
    confirmPassword: ''
})

const errors = reactive({
    email: '',
    phone: '',
    verifyCode: '',
    newPassword: '',
    confirmPassword: ''
})

// 计算属性
const canSendCode = computed(() => {
    if (verifyMethod.value === 'email') {
        return formData.email && !errors.email
    } else {
        return formData.phone && !errors.phone
    }
})

const canResetPassword = computed(() => {
    return formData.verifyCode &&
        formData.newPassword &&
        formData.confirmPassword &&
        !errors.verifyCode &&
        !errors.newPassword &&
        !errors.confirmPassword
})

// 切换密码显示/隐藏
const togglePassword = () => {
    showPassword.value = !showPassword.value
}

const toggleConfirmPassword = () => {
    showConfirmPassword.value = !showConfirmPassword.value
}

// 验证邮箱
const validateEmail = () => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    if (!formData.email) {
        errors.email = '请输入邮箱地址'
    } else if (!emailRegex.test(formData.email)) {
        errors.email = '请输入有效的邮箱地址'
    } else {
        errors.email = ''
    }
}

// 验证手机号
const validatePhone = () => {
    const phoneRegex = /^1[3-9]\d{9}$/
    if (!formData.phone) {
        errors.phone = '请输入手机号'
    } else if (!phoneRegex.test(formData.phone)) {
        errors.phone = '请输入有效的手机号'
    } else {
        errors.phone = ''
    }
}

// 验证密码
const validatePassword = () => {
    if (!formData.newPassword) {
        errors.newPassword = '请输入新密码'
    } else if (formData.newPassword.length < 6) {
        errors.newPassword = '密码至少6个字符'
    } else if (formData.newPassword.length > 20) {
        errors.newPassword = '密码不能超过20个字符'
    } else {
        errors.newPassword = ''
    }
    // 如果确认密码已输入，重新验证
    if (formData.confirmPassword) {
        validateConfirmPassword()
    }
}

// 验证确认密码
const validateConfirmPassword = () => {
    if (!formData.confirmPassword) {
        errors.confirmPassword = '请确认新密码'
    } else if (formData.newPassword !== formData.confirmPassword) {
        errors.confirmPassword = '两次输入的密码不一致'
    } else {
        errors.confirmPassword = ''
    }
}

// 发送验证码
const sendVerifyCode = async () => {
    if (!canSendCode.value) {
        alert('请完善验证信息')
        return
    }

    isLoading.value = true

    try {
        // 模拟发送验证码
        await new Promise(resolve => setTimeout(resolve, 1500))

        console.log('发送验证码到:', verifyMethod.value === 'email' ? formData.email : formData.phone)
        alert('验证码已发送，请注意查收')

        // 开始倒计时
        startCountdown()

        // 进入下一步
        currentStep.value = 2

    } catch (error) {
        console.error('发送验证码失败:', error)
        alert('发送验证码失败，请重试')
    } finally {
        isLoading.value = false
    }
}

// 重新发送验证码
const resendCode = async () => {
    if (countdown.value > 0) return

    isLoading.value = true

    try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        alert('验证码已重新发送')
        startCountdown()
    } catch (error) {
        alert('发送失败，请重试')
    } finally {
        isLoading.value = false
    }
}

// 开始倒计时
const startCountdown = () => {
    countdown.value = 60
    countdownTimer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
            clearInterval(countdownTimer)
        }
    }, 1000)
}

// 重置密码
const resetPassword = async () => {
    if (!canResetPassword.value) {
        alert('请完善所有信息')
        return
    }

    isLoading.value = true

    try {
        // 模拟重置密码
        await new Promise(resolve => setTimeout(resolve, 2000))

        console.log('重置密码:', formData)
        currentStep.value = 3

    } catch (error) {
        console.error('重置密码失败:', error)
        alert('重置密码失败，请重试')
    } finally {
        isLoading.value = false
    }
}

// 上一步
const prevStep = () => {
    if (currentStep.value > 1) {
        currentStep.value--
    }
}

// 跳转到登录页
const goToLogin = () => {
    router.push('/login')
}

// 组件卸载时清理定时器
onUnmounted(() => {
    if (countdownTimer) {
        clearInterval(countdownTimer)
    }
})
</script>

<style scoped>
.retrieve-container {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.retrieve-box {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.retrieve-header {
    text-align: center;
    margin-bottom: 30px;
}

.retrieve-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.retrieve-subtitle {
    color: #666;
    font-size: 14px;
    margin: 0;
}

.retrieve-form {
    margin-bottom: 20px;
}

/* 步骤指示器 */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e1e5e9;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: #667eea;
    color: white;
}

.step.completed .step-number {
    background: #4CAF50;
    color: white;
}

.step-text {
    font-size: 12px;
    color: #999;
    transition: color 0.3s ease;
}

.step.active .step-text {
    color: #667eea;
}

.step.completed .step-text {
    color: #4CAF50;
}

.step-line {
    width: 60px;
    height: 2px;
    background: #e1e5e9;
    margin: 0 10px;
    transition: background 0.3s ease;
}

.step-line.active {
    background: #4CAF50;
}

/* 步骤内容 */
.step-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

/* 验证方式选择 */
.verify-options {
    display: flex;
    gap: 10px;
}

.verify-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.verify-option:hover {
    border-color: #667eea;
    background: white;
}

.verify-option.active {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.verify-option input[type="radio"] {
    display: none;
}

.option-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.option-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    font-size: 16px;
    color: #999;
    z-index: 1;
}

.form-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    border: 2px solid #e1e5e9;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #999;
    padding: 0;
}

.password-toggle:hover {
    color: #667eea;
}

.error-message {
    display: block;
    color: #f44336;
    font-size: 12px;
    margin-top: 5px;
    animation: fadeIn 0.3s ease;
}

/* 验证码容器 */
.verify-code-container {
    display: flex;
    gap: 10px;
}

.verify-code-container .input-wrapper {
    flex: 1;
}

.resend-btn {
    padding: 12px 16px;
    border: 2px solid #667eea;
    background: white;
    color: #667eea;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.resend-btn:hover:not(:disabled) {
    background: #667eea;
    color: white;
}

.resend-btn:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}

/* 按钮组 */
.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.back-btn {
    flex: 1;
    padding: 14px;
    border: 2px solid #e1e5e9;
    background: white;
    color: #666;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.next-btn {
    flex: 2;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.next-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.next-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* 成功页面 */
.success-content {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.success-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
}

.success-message {
    color: #666;
    font-size: 14px;
    margin: 0 0 30px 0;
    line-height: 1.5;
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}

.retrieve-footer {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.login-link {
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.login-link:hover {
    color: #5a6fd8;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .retrieve-box {
        padding: 30px 20px;
        margin: 10px;
    }

    .retrieve-title {
        font-size: 24px;
    }

    .verify-options {
        flex-direction: column;
    }

    .verify-code-container {
        flex-direction: column;
    }

    .btn-group {
        flex-direction: column;
    }

    .step-line {
        width: 30px;
    }
}
</style>
